/* 淡入 */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.animation-fade-in {
    animation-name: fade-in;
}


/* 淡入-从上 */
@keyframes fade-in-top {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.animation-fade-in-top {
    animation-name: fade-in-top;
}


 /* 淡入-从下 */
 @keyframes fade-in-bottom {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.animation-fade-in-bottom {
    animation-name: fade-in-bottom;
}


/* 淡入-从右 */
@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.animation-fade-in-left {
    animation-name: fade-in-left;
}



/* 淡入-从右 */
@keyframes fade-in-right {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.animation-fade-in-right {
    animation-name: fade-in-right;
}




/* 缩放动画-宽度从 0 至 1 */
@keyframes scale-w-01 {
    0% {
        transform: scaleX(0);
    }

    100% {
        transform: scaleX(1);
    }
}
.animation-scale-w-01 {
    animation-name: scale-w-01;
}


/* 缩放动画-高度从 0 至 1 */
@keyframes scale-h-01 {
    0% {
        transform: scaleY(0);
    }

    100% {
        transform: scaleY(0);
    }
}
.animation-scale-h-01 {
    animation-name: scale-h-01;
}


/* 缩放动画 */
@keyframes scale-wh-01 {
    0% {
        scale: 0;
    }

    100% {
        scale: 1;
    }
}
.animation-scale-wh-01 {
    animation-name: scale-wh-01;
}


.transform-origin-left-top {
    transform-origin: left top;
}


.transform-origin-left-center {
    transform-origin: left center;
}

.transform-origin-left-bottom {
    transform-origin: left bottom;
}


.transform-origin-right-top {
    transform-origin: right top;
}

.transform-origin-right-center {
    transform-origin: right center;
}

.transform-origin-right-bottom {
    transform-origin: right bottom;
}


.transform-origin-center {
    transform-origin: center;
}

.transform-origin-center-top {
    transform-origin: center top;
}

.transform-origin-center-bottom {
    transform-origin: center bottom;
}



.animation-underline {
    --color-underline-1: black;
    --color-underline-2: black;
    background-image: linear-gradient(var(--color-underline-1), var(--color-underline-2));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 0.1em;
    transition: background-size 0.5s;
}
.animation-underline:hover {
    background-size: 100% 0.1em;
}

